import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
	DatePicker,
	Button,
	message
} from 'antd';
import styles from './ProCheckedSearchList.less';
import policeApplication from '@/assets/police_application.png';
import policeApplication2 from '@/assets/police_application2.png';
import MemberShipModal from './MemberShipModal';//生成花名册
import { exportWord } from 'mhtml-to-word';//导出请示
import printJS from 'print-js';
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class ApplicationModal extends PureComponent {

	constructor(props) {
	    super(props);
      this.state = {
        modalVisibleByMembership: false
      }
	}


	//生成花名册
	handleModalVisibleByMembership = flag => {
		const {
			handleModalVisibleByApplication,
		} = this.props;
		handleModalVisibleByApplication();
		this.setState({
			modalVisibleByMembership: !!flag,
		});
		if(flag) {
			message.success('生成成功');
		}
	};

	handleAddByMembership = () => {
		const { dispatch } = this.props;

		this.handleModalVisibleByMembership();

	};

  //导出请示
  handleExport = () => {
    exportWord({
      filename: "请示文件",
      selector: ".export",
      style:''
    })
  }

  //打印
  print = () => {
    printJS({
      printable: 'print',
      type: 'html'
    });
  }


  render() {
  		const {
			modalVisibleByApplication,
			form,
			handleModalVisibleByApplication,
		} = this.props;

		const { modalVisibleByMembership } = this.state;
		//生成花名册
		const parentMethodsByMembership = {
			handleModalVisibleByMembership: this.handleModalVisibleByMembership,
			handleAddByMembership: this.handleAddByMembership,
			modalVisibleByMembership
		};
return (
<div>
	    <Modal
width={900}
centered
destroyOnClose
title="请示文件"
visible={modalVisibleByApplication}
onCancel={() => handleModalVisibleByApplication(false)}
footer={<Button key="back" onClick = {() => handleModalVisibleByApplication(false)}>取消</Button>}
>
<div style={{width: '100%',height: '520px',overflow: 'auto',textAlign: 'center',position: 'relative'}}>,
      <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.print}>
      打印
      </Button>
      <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={() => this.handleExport(true)}>
      导出
      </Button>
	        <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={() => this.handleModalVisibleByMembership(true)}>
    		生成花名册
    		</Button>
  <span id="print" style={{clear: 'both'}}>
      <img alt="" src={policeApplication} style={{width: '80%'}}/>
      <img alt="" src={policeApplication2} style={{width: '80%'}}/>
  </span>

</div>
</Modal>
	<MemberShipModal {...parentMethodsByMembership}/>
</div>

);
  }

}

export default ApplicationModal;
